<template>
	<view>
		<Header />
		<view class="w-100 h100" :style="'margin-top:'+statusHeight+'rpx'"></view>
		<view class="w-100 f-b-c h80">
			<view class="w-25 re h80 f-c-c ty-nav-li" @click="nav_change(item)" v-for="(item,index) in serve" :key="item.code" :class="item.code == nav_code?'bg-f8ff':''">
				<!-- 左边边角显示 选中并且不能是第一个  -->
				<HornMargin type="left-bottom" :width="44" :height="40" v-if="item.code==nav_code && index != 0"/>
				<view class="t-b font32 font600">{{item.title}}</view>
				<!-- 右边边角显示  选中并且不能是最后一个 -->
				<HornMargin type="right-bottom" :width="44" :height="40" v-if="item.code==nav_code && index != (serve.length-1)"/>
			</view>
		</view>
		<view class="w-100 h1356 bg-f8ff ty-map" v-if="nav_code=='map'">
			<MapInfo />
		</view>
		<view class="w-100 h1356 bg-f8ff ty-activity" :style="'height:'+height+'rpx'" v-if="nav_code=='route'">
			<Line />
		</view>
		<view class="w-100 h1356 bg-f8ff ty-activity"  :style="'height:'+height+'rpx'" v-if="nav_code=='activity'">
			<Activity type='ACTIVITY'></Activity>
		</view>
		<view class="w-100 h1356 bg-f8ff ty-work-shop" :style="'height:'+height+'rpx'" v-if="nav_code=='workshop'">
			<Activity type='WORKSHOP'></Activity>
		</view>
		<Footer index="map"></Footer>
	</view>
</template>

<script>
	import Footer from "../../components/footer.vue" //底部导航
	import Header from "../../components/header.vue"
	import HornMargin from "../../components/horn_margin.vue"
	import MapInfo from "./map.vue"  //地图
	import Line from "./line.vue" // 线路
	// import Workshop from "./workshop.vue" // 课程/工坊
	import Activity from "./activity.vue" //活动
	export default{
		components:{
			Footer,
			Header,
			HornMargin,
			MapInfo,
			Line,
			// Workshop,
			Activity
		},
		data(){
			return{
				serve:[
					{title:"地图",code:"map"},
					{title:"路线",code:"route"},
					{title:"活动",code:"activity"},
					{title:"工坊",code:"workshop"},
				],// 地图，路线，活动，课程
				nav_code:"map",
				statusHeight: 0,
				height:0,
			}
		},
		created() {
			const {statusBarHeight,screenHeight} = uni.getStorageSync("systemInfo")
			this.statusHeight = statusBarHeight/(uni.upx2px(100)/100)  // 状态栏高度
			let height = screenHeight/(uni.upx2px(100)/100)
			this.height = height - (this.statusHeight + 100 + 80)
			uni.setStorageSync("map_height", this.height) //其他页面使用的高度
			
			// 返回页面后显示 对应的code
			this.nav_code = uni.getStorageSync("nav_code") || "map"
			
		},
		methods:{
			nav_change(e) {
				this.nav_code = e.code
				// 切换后 设置当前选中的code 用于进入下一层返回 
				// 会在底部导航切换时 清除
				uni.setStorageSync("nav_code",e.code)
			},
		}
	}
</script>
<style scoped lang="scss">
	.ty-nav-li{
		border-radius: 32rpx;
		&.bg-f8ff{
			border-radius: 32rpx 32rpx 0 0;
			.t-b{
				color: #000000;
			}
		}
	}
	.h1356{
		// height: 1356rpx;
		border-radius: 0 80rpx 0 0;
	}
	.ty-map{
		border-radius: 0 80rpx 0 0;
	}
	.ty-route{
		border-radius: 0 80rpx 80rpx 0;
	}
	.ty-activity{
		border-radius: 80rpx 80rpx 0 0;
	}
	.ty-work-shop{
		border-radius: 80rpx 0 0 0;
	}
	
</style>
